<template>
  <div class="area">
    <h3>素材推荐</h3>

    <div class="more"><span>更多作品</span><i class="sp i57"></i></div>
    <div class="items-list">
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
                        <span class="add sp i112" ng-class="{'hidden':showChart}"
                              ng-click="showChart=true;stopPropagation($event)"></span>

          <div class="add op hidden" ng-class="{'show':showChart}"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
      <div class="item">
        <div class="img-wrap"><img src="./A4.jpg">

          <div class="labels"></div>
        </div>
        <div class="item-content">
          <a href="play.html" class="title">素材名称显示</a>
          <span class="add sp i112"></span>

          <div class="add op hidden"><span class="favorite tb"><i
            class="inline-block sp i63"></i></span><span class="shop-chart tb"><i
            class="inline-block sp i86"></i></span></div>
          <div class="labels">商业广告|汽车|TVC|模特|源文件|高清|LogC|测试样片</div>
          <div class="labels labels2"><span>MOV</span><span class="split"></span><span>ProRes</span><span
            class="split"></span><span>1080P</span><span class="split"></span><span>25fps</span></div>
        </div>
        <div class="item-user">
          <div class="avatar"><img src="./A3.jpg" width="24" height="24"></div>
          <div class="username">UserName</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  module.exports = {}
</script>
